<template>
    <div id="app">

    </div>
</template>

<script>

    export default {
        name: 'app',
        data(){
            return {
                id:"",
                name:"",
                list:[
                    { id: 1, name: '赵高' },
                    { id: 2, name: '秦桧' },
                    { id: 3, name: '严嵩' },
                    { id: 4, name: '魏忠贤' }
                ]
            }
        },
        mounted(){
            var options = {
                width: 1900,
                height: 1200,
                boxWidth: 65,
                boxHeight: 40
            };
            var city_tree = {
                name: "中国",
                children: [
                    {
                        name: "浙江",
                        children: [
                            {
                                name: "杭州"
                            },
                            {
                                name: "宁波"
                            },
                            {
                                name: "温州"
                            },
                            {
                                name: "绍兴"
                            }
                        ]
                    },

                    {
                        name: "广西",
                        children: [
                            {
                                name: "桂林",
                                children: [
                                    {
                                        name: "秀峰区"
                                    },
                                    {
                                        name: "叠彩区"
                                    },
                                    {
                                        name: "象山区"
                                    },
                                    {
                                        name: "七星区"
                                    }
                                ]
                            },
                            {
                                name: "南宁"
                            },
                            {
                                name: "柳州"
                            },
                            {
                                name: "防城港"
                            }
                        ]
                    },

                    {
                        name: "黑龙江",
                        children: [
                            {
                                name: "哈尔滨"
                            },
                            {
                                name: "齐齐哈尔"
                            },
                            {
                                name: "牡丹江"
                            },
                            {
                                name: "大庆"
                            }
                        ]
                    },

                    {
                        name: "新疆",
                        children: [
                            {
                                name: "乌鲁木齐"
                            },
                            {
                                name: "克拉玛依"
                            },
                            {
                                name: "吐鲁番"
                            },
                            {
                                name: "哈密"
                            }
                        ]
                    }
                ]
            };


            var width = 500,
                height = 500;
            var tree = d3.layout.tree()
                .size([width, height - 200])
                .separation(function (a, b) {
                    return (a.parent == b.parent ? 1 : 2);
                });

            var diagonal = d3.svg.diagonal()
                .projection(function (d) {
                    return [d.y, d.x];
                });

            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(40,0)");



            var nodes = tree.nodes(city_tree);
            var links = tree.links(nodes);


            var rectangle = svg.append("rect")
                .attr("x",10)
                .attr("y",10)
                .attr("width",50)
                .attr("height",100);

            console.log(nodes);
            console.log(links);

            // var link = svg.selectAll(".link")
            //     .data(links)
            //     .enter()
            //     .append("path")
            //     .attr("class", "link")
            //     .attr("d", diagonal);

            var boxWidth = 65, boxHeight = 40;

            drawLine();
            // 将曲线换为折线
            function drawLine() {
                var link = svg.selectAll(".link")
                    .data(links)
                    .enter()
                    .append("path")
                    .attr("class", "link")
                    .attr("d", function(d){
                        return "M"+d.source.y+" "+(d.source.x+5)+
                            "L"+(d.source.y+55)+" "+(d.source.x+5)+
                            " L"+(d.source.y+55)+" "+(d.target.x+5)+" L"+
                            d.target.y+" "+(d.target.x+5);

                    })
                    .attr("style",function(){
                        return "stroke:#F7881F"
                    });
            }


            var node = svg.selectAll(".node")
                .data(nodes)
                .enter()
                .append("g")
                .attr("class", "node")
                .attr("transform", function (d) {
                    console.log(d,"-----------------");
                    return "translate(" + d.y + "," + d.x + ")";
                })

            node.append("circle")
                .attr("r",20)
                .style("fill",function(d){return "#f00";});

            node.append("text")
                .attr("dx", function (d) {
                    return d.children ? -8 : 8;
                })
                .attr("dy", 3)
                .style("text-anchor", function (d) {
                    return d.children ? "end" : "start";
                })
                .text(function (d) {
                    return d.name;
                });

        },
        components: {
        },
        methods:{
        }

    }
</script>

<style>
    .bk {
        transition: all 0.1s ease-out;
    }

    .blur {
        filter: blur(2px);
        opacity: 0.4;
    }
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
    .node {
        font: 12px sans-serif;
    }

    .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
    }

</style>
